<template>
    <div class="container job-container">
        <system-nav name="党员基本资料" :showBack="true"></system-nav>
        <div class="inner">
            <div class="header-avatar">
                <div class="item_bock head_p">
                    <div class="head_img">
                        <img :src="defaultUserface" v-real-img="userInfo.userface" />
                    </div>
                    <div class="header_setting" @click="uploadHeadImg" v-if="isEdit">
                        修改头像
                    </div>
                    <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
                </div>
            </div>
            <ul class="userInfo">
                <li>
                    <div>
                        <label><i v-if="isEdit">*</i>姓名</label>
                        <span v-if="!isEdit">{{userInfo.username}}</span>
                        <span v-if="isEdit"><input v-model="form.name"/></span>
                    </div>
                    <div class="userInfo-sex">
                        <label>性别</label>
                        <span v-if="!isEdit && userInfo.sex==1">男</span>
                        <span v-if="!isEdit && userInfo.sex==2">女</span>
                        <span v-if="isEdit">
                            <RadioGroup v-model="form.sex">
                                <Radio label="男"></Radio> 
                                <Radio label="女"></Radio>
                            </RadioGroup>
                        </span>
                    </div>
                </li>
                <li>
                    <div>
                        <label>身份证号</label>
                        <span v-if="!isEdit">{{userInfo.idCard}}</span>
                        <span v-if="isEdit"><input v-model="form.idCard"/></span>
                    </div>
                    <div>
                        <label>手机号</label>
                        <span v-if="!isEdit">{{userInfo.phone}}</span>
                        <span v-if="isEdit"><input v-model="form.phone"/></span>
                    </div>
                </li>
                <li>
                    <div>
                        <label>民族</label>
                        <span v-if="!isEdit">{{userInfo.national}}</span>
                        <span v-if="isEdit"><input v-model="form.national"/></span>
                    </div>
                    <div>
                        <label>政治面貌</label>
                        <span v-if="!isEdit">{{userInfo.political}}</span>
                        <span v-if="isEdit"><input v-model="form.political"/></span>
                    </div>
                </li>
                <li>
                    <div>
                        <label>文化程度</label>
                        <span v-if="!isEdit">{{userInfo.cultural}}</span>
                        <span v-if="isEdit"><input v-model="form.cultural"/></span>
                    </div>
                    <div>
                        <label>职业</label>
                        <span v-if="!isEdit">{{userInfo.job}}</span>
                        <span v-if="isEdit"><input v-model="form.job"/></span>
                    </div>
                    <!-- <div>
                        <label>地址</label>
                        <span v-if="!isEdit">{{userInfo.address}}</span>
                        <span v-if="isEdit"><input v-model="form.address"/></span>
                    </div> -->
                </li>
                <!-- <li>
                    <div>
                        <label style="width:156px;flex: initial;">职业</label>
                        <span v-if="!isEdit">{{userInfo.job}}</span>
                        <span v-if="isEdit"><input v-model="form.job"/></span>
                    </div>
                </li> -->
            </ul>
            <div class="userInfo-f">
                <Button type="primary" style="background:#999;border-color:#999;" @click="back()" >返回</Button>
                <Button type="primary" @click="Edit()" v-if="!isEdit">编辑</Button>
                <Button type="primary" style="background:#999;border-color:#999;" @click="Cancel()" v-if="isEdit">取消</Button>
                <Button type="primary" @click="Save()" v-if="isEdit">保存</Button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import { userView , userEdit,uploadFile} from '@/common/apis/system'
import { FileURL } from '@/common/apis/config'
import { defaultUserface } from '@/common/utils/const'

export default {
    name: "userInfo",
    mixins: [mixin],
    components: {
        SystemNav
    },
    data(){
        return{
            isEdit:false,
            defaultUserface,
            userInfo: {
                
            },
            avatar: '',
            form:{
                username:''
            }
        }
    },
    computed: {
        ...mapGetters({
            storeUserInfo: 'userInfo'
        }),
    },
    mounted(){
        this.getData()
    },
    methods:{
        getData(){
            return new Promise((resolve, reject) => {
                userView().then((res)=>{
                    if(res.data.code==200){
                        const data = res.data.content
                        this.userInfo = {
                            ...data,
                            userface: FileURL + data.userface
                        }
                        resolve(res)
                    }
                })
            })
        },
        uploadHeadImg () {
            this.$el.querySelector('.hiddenInput').click()
        },
        handleFile (e) {
            let _this = this
            let $target = e.target || e.srcElement
            let file = $target.files[0]
            console.log("file:" , file)
            // var reader = new FileReader()
            // reader.onload = (data) => {
            //     let res = data.target || data.srcElement
            //     // console.log(res.result)
            //     // this.avatar = res.result
            //         _this.userInfo.userface = res.result

            // }
            // reader.readAsDataURL(file)
            var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加 
            if (file) {
                formData.append("file", file); //接口需要传递的参数
                formData.append("type", 2); //接口需要传递的参数
            }
            let params = formData;
            uploadFile(params).then(res=>{
                if(res.data.code==200){
                    _this.userInfo.userface = FileURL + res.data.content
                }
            })
        },
        back(){
            this.$router.push('/')
        },
        Edit(){
            this.form = this.userInfo
            this.form.name = this.userInfo.username
            this.isEdit=!this.isEdit
            this.form.sex = this.userInfo.sex == 1 ?'男' : '女'
        },
        Save(){
            if(!this.form.name){
                this.$Message.error('姓名不能为空');
            }
            // else if(!this.form.sex){
            //     this.$Message.error('请选择性别');
            // }else if(!this.form.idCard){
            //     this.$Message.error('身份证号不能为空');
            // }else if(!this.form.national){
            //     this.$Message.error('民族不能为空');
            // }else if(!this.form.phone){
            //     this.$Message.error('手机号不能为空');
            // }else if(!this.form.job){
            //     this.$Message.error('职业不能为空');
            // }else if(!this.form.political){
            //     this.$Message.error('政治面貌不能为空');
            // }
            else{
                let params = {
                    cultural:this.form.cultural,
                    idCard:this.form.idCard,
                    job:this.form.job,
                    name:this.form.name,
                    national:this.form.national,
                    phone:this.form.phone,
                    political:this.form.political,
                    sex:this.form.sex,
                    id:this.form.id
                }
                params.sex=='男'?params.sex=1:params.sex=='女'?params.sex=2:''
                console.log(params)
                userEdit(params).then(res=>{
                    this.getData().then(result => {
                        const { username: userName, userface } = result.data.content
                        const newUserInfo = { ...this.storeUserInfo, userName, userface }
                        this.$store.commit('SET_USERINFO', newUserInfo)
                    })
                })
                this.isEdit=!this.isEdit
            }
            
        },
        Cancel(){
            this.isEdit=!this.isEdit
            this.getData()
        }
    }
}
</script>
<style lang="less" scoped>
    .userInfo{
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
        li{
            display: flex;
            border-bottom: 1px solid #ddd;
            line-height: 40px;
            position: relative;
            i{
                color: #f00;
                background: #f3f3f3;
                float: left;
                font-weight: 660;
                font-size: 17px;
                position: absolute;
                left: 15px;
                top: 4px;
                height: 10px;
            }
            div{
                flex: 1;
                display: flex;
                &>label{
                    width:156px;
                    display: inline-block;
                    border-right: 1px solid #ddd;
                    text-align: center;
                    background: #f3f3f3;
                    position: relative;
                }
                span{
                    display: inline-block;
                    border-right: 1px solid #ddd;
                    flex: 3;
                    text-align: center;
                    input{
                        display:inline-block;
                        width:90%;
                        padding-left: 10px;
                        border:none;
                        text-align: center;
                    }
                }
            }
        }
        
    }
    .header-avatar{
        .head_img{
            width:114px;
            height:114px;
            border-radius: 50%;
            border:1px solid #eee;
            overflow: hidden;
            margin: 0 auto;
            position:relative;
            z-index: 100;
            img{
                width:100%;
                height:100%;
                border-radius: 50%;
                object-fit: cover;
            }
        }
        .item_bock{
            width: 114px;
            margin: 0 auto;
            overflow: hidden;
            height: 114px;
            border-radius: 50%;
            margin-bottom: 40px;
        }
        .header_setting{
            height: 45px;
            line-height: 41px;
            width: 124px;
            text-align: center;
            display: block;
            margin: 0 auto;
            margin-top: -44px;
            background: rgba(0,0,0,0.4);
            color: #fff;
            border-radius: 0%;
            position:relative;
            z-index: 1000;
            cursor: pointer;
        }
    }
    .userInfo-f{
            width: 60%;
            margin: 40px auto 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .userInfo-sex .ivu-radio-wrapper{
            background: none !important;
            border-right:none;
        }
</style>